<template>
  <div class="detail" id="notebook-list">
    <header>
      <a href="#" class="btn" @click.prevent="onCreate"
        ><i class="iconfont icon-xinzeng"></i> 新建笔记本</a
      >
    </header>
    <main>
      <div class="layout">
        <h3>笔记本列表({{ notebooks.length }})</h3>
        <div class="book-list">
          <router-link
            :to="`/note?notebookId=${notebook.id}`"
            class="notebook"
            v-for="notebook in notebooks"
            :key="notebook.id"
          >
            <div class="book-list-container">
              <span class="book-list-left">
                <span class="book-list-left-title">{{ notebook.title }}</span>
                <span class="book-list-left-quantity">{{
                  notebook.noteCounts
                }}</span>
              </span>
              <span class="book-list-right">
                <span>{{ notebook.createdAtFriendly }}</span>
                <span @click.stop.prevent="onEdit(notebook)">编辑</span>
                <span @click.stop.prevent="onDelete(notebook)">删除</span>
              </span>
            </div>
          </router-link>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import Notebooks from '@/apis/notebooks.js'
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
export default {
  data() {
    return {}
  },
  created() {
    this.checkLogin({ path: '/login' })
    this.getNotebooks()
  },
  computed: {
    ...mapGetters(['notebooks']),
  },
  methods: {
    ...mapActions([
      'updateNotebook',
      'deleteNotebook',
      'addNotebook',
      'checkLogin',
    ]),
    getNotebooks() {
      console.log(this.notebooks, '笔记本列别爱')
      this.$store.dispatch('getNotebooks')
    },
    onCreate() {
      this.$prompt('请输入笔记本标题', '新建', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^.{1,30}$/,
        closeOnClickModal: false,
        inputErrorMessage: '笔记本标题不能为空，且不能超过30个字符',
      }).then(({ value }) => {
        this.addNotebook({ title: value })
      })
    },
    onEdit(notebook) {
      let title = ''
      this.$prompt('请输入笔记本标题', '编辑', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^.{1,35}$/,
        inputValue: notebook.title,
        closeOnClickModal: false,
        inputErrorMessage: '笔记本标题不能为空，且不能超过30个字符',
      }).then(({ value }) => {
        this.updateNotebook({ notebookId: notebook.id, title: value })
      })
    },
    onDelete(notebook) {
      this.$confirm('是否要删除此笔记本', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.deleteNotebook({ notebookId: notebook.id })
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.detail {
  width: 100%;
  header {
    padding: 12px;
    border-bottom: 1px solid #ccc;
    font-size: 14px;
    a {
      background: #fff;
      padding: 4px 8px;
      border-radius: 4px;
    }
    a:hover {
      background: rgb(196, 217, 248);
      color: #fff;
    }
  }
  .layout {
    margin: 0 auto;
    padding: 30px 40px;
    width: 100%;
    h3 {
      font-size: 12px;
      margin-bottom: 10px;
    }
    .book-list {
      background: white;
      border-radius: 4px;
      &-container {
        display: flex;
        justify-content: space-between;
        padding: 12px 14px;
        color: #b3c0c8;

        border-bottom: 1px solid #ebebeb;
      }
      &-left {
        &-title {
          font-weight: 700;
          margin-right: 4px;
          color: #444444;
        }
        &-quantity {
          font-size: 12px;
        }
      }
      &-right {
        font-size: 12px;
        span {
          margin-left: 10px;
        }
      }
    }
  }
}
</style>
